<template>
  <div>
    <div class="c-flex-column c-ph24">
      <div class="c-flex-row c-justify-sa c-w100 c-bd-b1-ef c-pv32" @click="goMsgDetail(1)">
        <div class="c-p">
          <img class="c-ww70 c-hh70" :src="require('@/assets/i/wap/message/message1.png')" alt="">
          <circle-count v-if="dataInfo.isReceiveMsg" :count="dataInfo.system" :coordinate="[1.2, -0.1]"></circle-count>
        </div>
        <div class="c-flex-column c-justify-center c-w0 c-flex-grow1 c-ml40">
          <div class="c-flex-row c-aligni-center c-justify-sb">
            <span class="c-fs26 c-fc-xblack">系统消息</span>
            <span class="iconfont c-fc-gray c-fs18">&#xe635;</span>
          </div>
        </div>
      </div>
      <div class="c-flex-row c-justify-sa c-w100 c-bd-b1-ef c-pv32" @click="goMsgDetail(2)">
        <div class="c-p">
          <img class="c-ww70 c-hh70" :src="require('@/assets/i/wap/message/message2.png')" alt="">
          <circle-count v-if="dataInfo.isReceiveMsg" :count="dataInfo.push" :coordinate="[1.2, -0.1]"></circle-count>
        </div>
        <div class="c-flex-column c-justify-center c-w0 c-flex-grow1 c-ml40">
          <div class="c-flex-row c-aligni-center c-justify-sb">
            <span class="c-fs26 c-fc-xblack">消息推送</span>
            <span class="iconfont c-fc-gray c-fs18">&#xe635;</span>
          </div>
        </div>
      </div>
      <div class="c-flex-row c-justify-sa c-w100 c-bd-b1-ef c-pv32" v-if="companyAuth.enableQuestionModule == 1" @click="goMsgDetail(3)">
        <div class="c-p">
          <img class="c-ww70 c-hh70" :src="require('@/assets/i/wap/message/message3.png')" alt="">
          <circle-count v-if="dataInfo.isReceiveMsg" :count="dataInfo.question" :coordinate="[1.2, -0.1]"></circle-count>
        </div>
        <div class="c-flex-column c-justify-center c-w0 c-flex-grow1 c-ml40">
          <div class="c-flex-row c-aligni-center c-justify-sb">
            <span class="c-fs26 c-fc-xblack">{{questionCustom == 1 ? '预约专区' : '问答消息'}}</span>
            <span class="iconfont c-fc-gray c-fs18">&#xe635;</span>
          </div>
        </div>
      </div>
      <div class="c-flex-row c-justify-sa c-w100 c-bd-b1-ef c-pv32" @click="goMsgDetail(4)">
        <div class="c-p">
          <img class="c-ww70 c-hh70" :src="require('@/assets/i/wap/message/message4.png')" alt="">
          <circle-count v-if="dataInfo.isReceiveMsg" :count="dataInfo.comment" :coordinate="[1.2, -0.1]"></circle-count>
        </div>
        <div class="c-flex-column c-justify-center c-w0 c-flex-grow1 c-ml40">
          <div class="c-flex-row c-aligni-center c-justify-sb">
            <span class="c-fs26 c-fc-xblack">评论消息</span>
            <span class="iconfont c-fc-gray c-fs18">&#xe635;</span>
          </div>
        </div>
      </div>
      <div class="c-flex-row c-justify-sa c-w100 c-bd-b1-ef c-pv32" @click="goMsgDetail(5)">
        <div class="c-p">
          <img class="c-ww70 c-hh70" :src="require('@/assets/i/wap/message/message5.png')" alt="">
          <circle-count v-if="dataInfo.isReceiveMsg" :count="dataInfo.income" :coordinate="[1.2, -0.1]"></circle-count>
        </div>
        <div class="c-flex-column c-justify-center c-w0 c-flex-grow1 c-ml40">
          <div class="c-flex-row c-aligni-center c-justify-sb">
            <span class="c-fs26 c-fc-xblack">收益消息</span>
            <span class="iconfont c-fc-gray c-fs18">&#xe635;</span>
          </div>
        </div>
      </div>
    </div>
    <div v-if="companyAuth != null && companyAuth.companyNav != null">
      <nav-bottom-bar :itemIndex="5" v-for="(item,index) in companyAuth.companyNav" :key="index" v-if="item.navType == 3"></nav-bottom-bar>
    </div>
  </div>
</template>

<script>
import NavBottomBar from "@/components/templates/common/navBottomBar.vue";
import circleCount from "@/components/templates/common/circleCount.vue"
import { utilJs } from "@/utils/common.js"
export default {
  name: 'MessageIndex',
  components: {
    NavBottomBar,
    circleCount
  },
  props: [],
  beforeCreate() {

  },
  data() {
    return {
      companyAuth: localStorage.getItem("companyAuth") ? JSON.parse(localStorage.getItem("companyAuth")) : null,
      theme: localStorage.getItem("colorName") ? localStorage.getItem("colorName") : 'mb5_default',
      questionCustom: localStorage.getItem("questionCustom"), //定制阿卡西线上学院
      dataInfo: '',
    }
  },
  created() {
    utilJs.appShare(this);
  },
  mounted() {
  },
  computed: {
    checkUnRe() {
      return this.$store.state.oem_store.msgCount;
    }
  },
  watch: {
    checkUnRe: function (old, newv) {
      this.dataInfo = this.$store.state.oem_store.msgCount;
    }
  },
  methods: {
    iosAppRouteChange(toPath) {
      if (utilJs.isIOSApp()) {
        window.webkit.messageHandlers.iosWechatRoute.postMessage(toPath);
      } else if (utilJs.isAndoridNewApp()) {
        let data = {
          path: toPath
        }
        window.androidWechatRoute.doAction(JSON.stringify(data))
      } else {
        this.$routerGo(this, "push", { path: toPath });
      }
    },
    goMsgDetail: function (index) {
      if (!this.dataInfo.isReceiveMsg) {
         this.$showCjToast({
            text: "暂不允许查看消息",
            type: "warn",
          });
        return;
      }
      let toPath = `/message/messageList?type=${index}`;
      this.iosAppRouteChange(toPath);
    },

    getUnReadCount: function () {
      let $this = this;
      utilJs.getMethod(global.apiurl + 'messages/unreads', function (res) {
        $this.dataInfo = res;
        $this.companyAuth = JSON.parse(localStorage.getItem("companyAuth"));
      });
    },

    //分享
    wechatShare: function () {
      utilJs.wechatConfig("", "", "", "", function () { });
    },
    //手机端分享
    appShare: function () {
      var shareUrl =
        window.location.href.split("#")[0] +
        "#/" +
        "?refereeId=" +
        localStorage.getItem("userId");
      utilJs.appShareTrue("", "", shareUrl, "");
    }
  },
  activated() {
    //系统内消息，1代表系统消息，2代表推送消息，3问答消息，4评论消息，5收益消息，6分享消息
    setDocumentTitle("消息");// eslint-disable-line
    this.getUnReadCount();//这个是通过指令向后台取消息个数
    //this.dataInfo = this.$store.state.oem_store.msgCount;//这个是websocket中直接拿取
    this.companyAuth = JSON.parse(localStorage.getItem("companyAuth"));
    //如果一进来没有发请求，那么要把loading给关闭
    this.$store.commit('updateLoadingStatus', {
      isLoading: false
    });
    this.wechatShare();
  },
  deactivated() {

  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.c-bd-b1-ef {
  border-bottom: 1px solid #EFEFEF;
}
</style>
